<template>
	<view class="ep-select-box">
		<!-- 蒙版区域 开始 -->
		<view class="ep-mask-box" v-show="show_option" @click="clickMask"></view>
		<!-- 蒙版区域 开始 -->

		<!-- 输入框区域 开始 -->
		<view class="ep-input-box" :class="{'disabled':disabled}" @click="openOptions">
			<!-- 文本模式 -->
			<view v-if="!filterable" class="label-item">{{showLabel}}</view>
			<!-- 输入框模式 -->
			<view v-else class="input-item">
				<input type="text" v-model="input" :placeholder="showLabel" :placeholderStyle="placeholderStyle"
					@input="handleInput" :focus="isFocus" />
			</view>
			<!-- 箭头图标切换 -->
			<image class="icon"
				:src="show_option? require('@/static/componentIcon/ic_arrow_up.png'):require('@/static/componentIcon/ic_arrow_down.png') ">
			</image>
		</view>
		<!-- 输入框区域 结束 -->

		<!-- 弹出的下拉区域 开始 -->
		<view class="ep-select-content-wrap" :style="{transform: show_option?'scaleY(1)': 'scaleY(0)'}">
			<scroll-view class="ep-select-content" :scroll-y="true" @scrolltolower="handleScrolltolower">
				<view v-for="item in options" :key="item[value_key]"
					:class="{'disabled':item.disabled,'active':value==item[value_key]}" class="option-item"
					@click="itemClick(item)">{{item[label_key]}}</view>
				<view v-if='options.length==0' class="empty-text">暂无数据</view>
			</scroll-view>
		</view>
		<!-- 弹出的下拉区域 结束 -->
	</view>
</template>

<script>
	function debounce(fn, delay = 1000) {
		let timer = null
		return function() {
			clearTimeout(timer)
			timer = setTimeout(() => {
				fn.apply(this, arguments)
			}, delay)
		}

	}
	export default {
		data() {
			return {
				show_option: false, //是否展示下拉选项
				input: "", //开启搜索时输入框的值
				isFocus: false
			}
		},
		props: {
			value: {
				type: [String, Number],
				default: ""
			},
			options: {
				type: Array,
				default: function() {
					return []
				}
			},
			value_key: {
				type: String,
				default: "value"
			},
			label_key: {
				type: String,
				default: "label"
			},
			disabled: {
				type: Boolean,
				default: false
			},
			filterable: {
				type: Boolean,
				default: true
			},
			keepInput: {
				type: Boolean,
				default: true
			}
		},
		model: {
			prop: 'value',
			event: "input"
		},
		mounted() {

		},
		methods: {
			handleScrolltolower() {
				this.$emit('handleScrolltolower')
			},
			//点击选中选项
			itemClick(item) {
				if (item.disabled) return

				//关闭
				this.show_option = false
				if (this.filterable) {
					this.isFocus = false
				}
				//修改v-model的值
				this.$emit('input', item[this.value_key])
				//将事件通知父组件
				this.$emit('change', item[this.value_key])
				this.input = item[this.label_key]

				//重置输入框
				if (!this.keepInput) {
					this.input = ''
				}

			},
			//展开选项
			openOptions() {
				//禁用则不做任何操作
				if (this.disabled) return
				if (this.filterable) {
					this.isFocus = true
				}

				this.show_option = true
			},
			//点击蒙版
			clickMask() {
				//关闭下拉选项
				this.show_option = false
				if (this.filterable) {
					this.isFocus = false
				}
				//重置输入框
				if (!this.keepInput) {
					this.input = ''
				}
			},
			handleInput: debounce(function(event) {
				const { value } = event.detail
				if (this.filterable) {
					this.$emit('remoteMethod', value)
				}
			}, 300)
		},
		computed: {
			//输入框要展示的文本 动态计算placeholder
			showLabel() {
				//根据v-model传入的值，查找对应的下拉项
				var target = this.options.find(item => {
					return item[this.value_key] == this.value
				})
				//如果目标项存在 则返回其 label
				if (target) {
					return target[this.label_key]
				} else {
					return "请选择"
				}
			},
			//动态计算placeholder的样式
			placeholderStyle() {
				//如果未选中 则灰色
				if (!this.value) {
					return 'color:#999;'
				} else if (this.show_option) {
					//如果已选中 但是下拉框已弹出 则灰色
					return 'color:#999;'
				} else {
					//否则黑色
					return 'color:#333;'
				}
			}

		}
	}
</script>

<style scoped lang="scss">
	.ep-select-box {
		box-sizing: border-box;
		position: relative;
		width: 100%;
		height: 100%;
		color: #333;
		background-color: #fff;
		font-size: 14px;

		.icon {
			width: 36rpx;
			height: 36rpx;
		}


		.ep-mask-box {
			position: fixed;
			z-index: 999;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			background: none;
		}

		.ep-input-box {
			border: 1rpx solid #DCDFE6;
			border-radius: 4px;
			position: relative;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20rpx;
			height: 100%;

			.label-item {
				display: flex;
				align-items: center;
				flex: 1;
				font-size: 28rpx;
			}

			.input-item {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				flex: 1;
			}
		}

		.disabled {
			cursor: not-allowed;
			background-color: #f5f7fa;

			.label-item {
				color: #999;
			}
		}

		.ep-select-content-wrap {
			width: 100%;
			position: absolute;
			// top: 45px;
			left: 0;
			top: 100%;

			z-index: 9999;
			padding-top: 6px;
			transition: all 0.3s;

			transform-origin: center 0;

			.ep-select-content {
				border-radius: 4rpx;
				background: #FFF;
				box-shadow: 0 0 6rpx 0 #00000040;
				max-height: 256rpx;
				overflow-y: auto;

				.option-item {
					padding: 0 20rpx;
					height: 64rpx;
					display: flex;
					align-items: center;
					cursor: pointer;
					color: #666666;
					font-size: 28rpx;
					font-weight: 400;
					box-sizing: border-box;

					&:hover {
						background-color: #f5f7fa;
					}
				}

				.active {
					background: #EDEDED;
				}

				.disabled {
					color: #c0c4cc;

					&:hover {
						background-color: #f5f7fa;
					}
				}
			}
		}
	}

	.empty-text {
		color: #999;
		text-align: center;
		padding: 3px 0;
		font-size: 14px;
	}
</style>